<template>
  <div class="page blur-slur">
    <div class="box">Cool</div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.blur-slur {
  background-color: black;
  .box {
    box-sizing: border-box;
    margin: 100px auto;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    background-color: black;
    position: relative;
    font-size: 50px;
  }
  .box:before,
  .box:after {
    display: block;
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4cd137, black, #3498db);
  }
  .box:before {
    z-index: -1;
  }
  .box:after {
    z-index: -2;
    filter: blur(30px);
  }
}
</style>